<template>
  <div class="wrap">
    <!--播放器主体区域-->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="../assets/player_title.png" alt="">
        <!-- 搜索歌曲 -->
        <el-input placeholder="搜索歌曲" style="max-width: 25em;margin-right: 2em" v-model="query" @change="searchMusic">
          <el-button slot="append" style="background-color: aqua" icon="el-icon-search" @click="searchMusic"></el-button>
        </el-input>
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class="song_wrapper">
          <ul class="song_list">
            <li v-for="item in musicList">
              <a href="javascript:;" @click="playMusic(item.id)"></a>
              <b>{{item.name}}</b>
              <i>{{item.artists[0].name}}</i>
              <span v-if="item.mvid!=0" @click="playMv(item.mvid)"><i></i></span>
            </li>
          </ul>
          <img src="../assets/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing: isPlaying}">
          <img src="../assets/player_bar.png" class="play_bar">
          <!-- 黑胶碟片 -->
          <img src="../assets/disc.png" class="disc autoRotate">
          <img :src="musicCover" class="cover autoRotate">
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class="title" style="color: brown">热门评论</h5>
          <div class="comment_list">
            <dl v-for="comment in hotComments">
              <dt>
                <img :src="comment.user.avatarUrl" alt="">
              </dt>
              <dd class="name">{{comment.user.nickname}}</dd>
              <dd class="detail">{{comment.content}}</dd>
            </dl>
          </div>
        </div>
      </div>
      <div class="audio_con">
        <audio ref="audio" @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con" style="display:none;" v-show="isShow">
        <video :src="mvUrl" controls="controls" autoplay></video>
        <div class="mask" @click="hide"></div>
      </div>
    </div>
  </div>
</template>

<script>
var xhr = new XMLHttpRequest();
export default {
  name: "Music",
  data() {
    return {
      // 查询关键字
      query: "",
      // 歌曲数组
      musicList: [],
      // 歌曲地址
      musicUrl: "",
      // 歌曲封面
      musicCover: "",
      // 歌曲评论
      hotComments: [],
      // 歌曲播放状态
      isPlaying: false,
      // 遮罩层的显示状态
      isShow: false,
      // mv地址
      mvUrl: "",
      ison: true
    }
  },
  methods: {
    searchMusic() {
      xhr.open("get", "https://autumnfish.cn/search");
      xhr.setRequestHeader("Access-Control-Allow-Origin", "http://localhost:63342");
      this.$axios.get("https://autumnfish.cn/search?keywords=" + this.query).then(response=>{
        //console.log(response);
        this.musicList = response.data.result.songs;
      }).catch(error=>{
        console.log(error);
      })
    },
    playMusic(musicId) {
      //console.log(musicId);
      // 获取歌曲地址
      this.$axios.get("https://autumnfish.cn/song/url?id=" + musicId).then(response=>{
        //console.log(response.data.data[0].url);
        //console.log(response);
        this.musicUrl = response.data.data[0].url;
      }).catch(error=>{
        console.log(error);
      })

      // 歌曲详情获取
      this.$axios.get("https://autumnfish.cn/song/detail?ids=" + musicId).then(response=>{
        //console.log(response);
        this.musicCover = response.data.songs[0].al.picUrl;
      }).catch(error=>{
        console.log(error);
      })

      // 歌曲评论获取
      this.$axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId).then(response=>{
        //console.log(response);
        this.hotComments = response.data.hotComments;
        //console.log(response.data.hotComments);
      }).catch(err=>{
        console.log(err);
      })
    },
    play() {
      //console.log("play");
      this.isPlaying = true;
    },
    pause() {
      //console.log("pause");
      this.isPlaying = false;
    },
    playMv(mvid) {
      this.$axios.get("https://autumnfish.cn/mv/url?id=" + mvid).then(response=>{
        //console.log(response);
        var url = response.data.data.url;
        this.isShow = true;
        this.mvUrl = url;
      }).catch(err=>{
        console.log(err);
      })
    },
    // 隐藏
    hide() {
      this.isShow = false;
      document.getElementsByTagName("video")[0].pause();
    },
    // 暂停和播放
    switch() {
      var audio = document.getElementsByClassName("myaudio")[0];
      if (this.isPlaying){
        audio.pause();
      } else{
        audio.play();
      }
    }
  },
  mounted(){
    var width = screen.width;
    var html = document.getElementsByTagName("html")[0];
    console.log(width);
    //console.log(screen.height);
    if (width > 600) {
      html.style.cssText = "font-size: 10px";
    } else {
      html.style.cssText = "font-size: 4.5px"
    }
  }
}
</script>

<style src="../assets/css/index.css" scoped></style>
<style scoped>

</style>